import React, { Component } from 'react'
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Table, Divider, Modal, message, Button } from 'antd';
import SearchPersonMsg from './SearchPersonMsg';

export interface Props {
  dispatch?: Function,
  children?: React.ReactNode,
  loading: boolean,
  taskRuleTargetList: {
    data: Array<any>,
    dataCnt: number
  },
  buttons?: Array<any>,
  dict?: object,
  id?: string
}
const ONE_PAGE_SIZE = 10;

@connect(({ task_rules, loading }) => ({
  taskRuleTargetList: task_rules.taskRuleTargetList,
  loading: loading.effects['task_rules/queryTaskRuleTargetPage']
}))
class FormPersonMessageList extends Component<Props, any> {
  constructor(props) {
    super(props);
    this.state = {
      current: 1,
      index: 1,
      deviceRules: {
        data: [],
        dataCnt: 0
      },
      visible: false,
      id: ''
    };
    this.initCurrent = this.initCurrent.bind(this);
  }

  componentWillMount() {
    this.queryData();
  }

  queryData(offset = 1, size = ONE_PAGE_SIZE) {
    const { dispatch, id } = this.props;
    this.setState({
      id
    });
    dispatch({
      type: 'task_rules/queryTaskRuleTargetPage',
      payload: {
        pageNum: offset,
        pageSize: size,
        taskRuleId: id,
        targetTypeList: ['-1']
      },
    });
  }

  initCurrent() {
    this.setState({
      current: 1
    })
  }

  render() {
    const { taskRuleTargetList = {data: [], dataCnt: 0 } } = this.props;
    const { data = [], dataCnt } = taskRuleTargetList;
    const ans = data && Array.isArray(data) ? data.map((item, index) => ({
        key: index,
        id: item.id,
        jobNumber: item.user ? item.user.jobNumber : '/',
        loginName: item.user ? item.user.loginName : '/',
        realName: item.user ? item.user.realName : '/',
        position: item.user ? item.user.positionName : '/',
        status: item.user ? item.user.status : '/',
        mobile: item.user ? item.user.mobile : '/',
        roleList: item.user && Array.isArray(item.user.roleList) ? (item.user.roleList.map(it => it.name)).join(' ') : '/',
        groupList: item.user && item.user.groupList && Array.isArray(item.user.groupList) ? (item.user.groupList.map(it => it.name)).join(' ') : '/',
      })
    ) : [];
    const pagination = {
      total: dataCnt,
      showTotal: total => `共 ${total} 条`,
      showQuickJumper: true,
      pageSize: ONE_PAGE_SIZE,
      onChange: (current) => {
        this.setState({ current });
        this.queryData(current)
      },
    };
    const columns = [{
      title: '工号',
      dataIndex: 'jobNumber',
    }, {
      title: '登录名',
      dataIndex: 'loginName',
    }, {
      title: '真实姓名',
      dataIndex: 'realName',
    }, {
      title: '职位',
      dataIndex: 'position',
    }, {
      title: '手机号',
      dataIndex: 'mobile',
    }, {
      title: '用户角色',
      dataIndex: 'roleList'
    }, {
      title: '部门',
      dataIndex: 'groupList',
    }];
    /*
    * , {
      title: '操作', key: 'x', render: (record) => {
        return (
          <div style={{display: 'flex'}}>
            <span style={{'color': '#0880DF', 'cursor': 'pointer'}} onClick={this.toDeviceDetail.bind(this, record)}>详情</span>
          </div>
        )}
    }
    * */
    return (
      <div style={{'width': '90%', 'margin': '20px auto 0'}}>
        {/* <SearchPersonMsg current={ this.state.current } initCurrent={this.initCurrent} deviceId={this.state.id}/> */}
        <Table
          columns={columns}
          pagination={pagination}
          dataSource={ans}
          bordered
          loading={this.props.loading}
        />
      </div>
    );
  }
}

export default FormPersonMessageList;
